<template>
  <el-dialog width="800px" top="3%" title="选择素材" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <div>
      <div class="search-box">
        <div>
          <span>分组：</span>
          <el-cascader v-model="searchForm.typeId" :options="parentTypeOptions" :props="parentProps" placeholder="请选择分组"
            @change="typeIdChange" clearable />
        </div>
      </div>
      <div class="table-box">
        <el-table style="margin-top:10px;" height="60vh"
          :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="filePath" label="缩略图" align="center">
            <template v-slot="scope">
              <img style="width:50px;" :src="scope.row.filePath" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="fileName" label="文件名称" align="center">
            <template v-slot="scope">
              {{ scope.row.fileName || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="fileType" label="文件后缀" align="center">
            <template v-slot="scope">
              {{ scope.row.fileType || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="height" label="文件尺寸" align="center">
            <template v-slot="scope">
              {{ (scope.row.width + '*' + scope.row.height) || '' }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fileSize" label="文件大小" align="center">
            <template v-slot="scope">
              {{ bytesToSize(scope.row.fileSize) || '' }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column prop="filePath" label="文件链接" align="center" min-width="180">
            <template v-slot="scope">
              <div class="text-hid">
                <div>
                  {{ scope.row.filePath || '' }}
                </div>
                <img title="复制" style="width:18px;" src="@/assets/icons/copy-icon.png" alt="" @click="copy(scope.row.filePath)">
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="Operations" label="操作" align="center" width="160">
            <template v-slot="scope">
              <div class="table-handle-box">
                <el-link style="font-size:14px" type="primary" @click="lookHanlde(scope.row)">选择</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex-fe">
          <el-pagination v-model:currentPage="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]" small
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from 'vue'
import api from './api'
export default {
  setup(props, context) {
    const state = reactive({
      dialogFormVisible: false,
      searchForm: {},

      page: 1,
      size: 10,
      total: 0,
      tableData: [],

      parentTypeOptions: [],
      parentProps: {
        value: 'typeId',
        label: 'typeName',
        checkStrictly: true,
      },
    })

    function dialogShow() {
      getTableData()
      getSucaiTree()
      state.dialogFormVisible = true
    }

    function getTableData() {
      const obj = {
        typeId: (state.searchForm.typeId && state.searchForm.typeId.length > 0) ? state.searchForm.typeId[state.searchForm.typeId.length - 1] : null,
        page: state.page,
        size: state.size,
      }
      api.sucaiLoad(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getSucaiTree() {
      const obj = {

      }
      api.sucaiTypeLoadAll(obj).then(res => {
        if (res.code == '200') {
          state.parentTypeOptions = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function typeIdChange(e) {
      const typeId = e ? e[e.length - 1] : null
      getTableData(typeId)
    }

    function dialogClose() {
      state.page = 1
      state.searchForm = {}
    }

    function lookHanlde(data) {
      context.emit('dialogClose', data)
      state.dialogFormVisible = false
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    return {
      ...toRefs(state),
      dialogClose,
      dialogShow,
      lookHanlde,
      typeIdChange,
      handleCurrentChange,
      handleSizeChange,
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
}
.flex-fe {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>